@import 'styles/ui.module';
@import 'styles/settings';
@import 'styles/typography-extends';

$margin: 8px;

.container {
  @include backdropBlur();
  border-radius: $border-radius-desktop;
  padding-bottom: 34px;
  margin-top: $widgetsTopMargin;

  @media #{$tablet-portrait} {
    min-height: 430px;
    padding-bottom: 0;
  }
}

.padding {
  padding: $mobile-sidebar-side-paddings;

  @media #{$tablet-portrait} {
    padding: $sidebar-paddings;
  }
}

.title {
  @extend %title;
  margin: 0;
  color: white;
}

.pieChart {
  display: block;
  margin: 0 auto;
}

.overrideCheckbox-protected-areas {
  input[type="checkbox"]:checked + label::before {
    background: $protected-areas;
    border: 2px solid $white; 
  }
}

.overrideCheckbox-community-areas {
  input[type="checkbox"]:checked + label::before {
    background: $protected-areas;
    border: 2px solid $white; 
  }
}

.notUnderConservationLabel {
  @extend  %bodyText;
  color: $white;
  padding: 0 $mobile-sidebar-side-paddings;
  position: relative;
  margin: 8px 0 0;
  width: max-content;

  @media #{$tablet-portrait} {
    padding: 0 $sidebar-paddings;
  }

  &:after {
    content: '';
    background: $slate-gray;
    border-radius: 50%;
    display: block;
    height: 10px;
    position: absolute;
    right: 0px;
    top: 6px;
    width: 10px;
  }
}

.description {
  @extend %annotation;
  color: $alto;
  margin-bottom: 24px;
}

.boldFont {
  font-weight: bold;
}